<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style type="text/css">
        body,
        html {
            height: 100%;
        }
    </style>
    <!-- 引入 echarts.js -->
    <!-- script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script -->
    <script src="./echarts.min.js"></script> <!-- 从"当前文件的同级目录"引入 echarts.min.js -->
</head>

<!-- https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js -->
<!-- https://echarts.apache.org/zh/option.html#series-line.encode   -->

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:100%;height:90%;"></div>
    <script type="text/javascript">

        // 需要注释掉它
        // import * as echarts from 'echarts';

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                // tooltip（提示框组件）
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                },
            },
            xAxis: {
                type: 'value',
                name: 'x:cate_x', // 坐标轴名称。不写也没事, 同时赋值之后可以在坐标轴上显示名称,
            },
            yAxis: {
                type: 'value',
                name: 'y:cate_score',
            },
            series: {
                type: 'line',
                dimensions: ['cate_x', 'cate_y', 'cate_z', 'cate_score'],
                // https://echarts.apache.org/zh/option.html#series-line.encode
                // 当使用 dimensions 给维度定义名称后，encode 中可直接引用名称，
                encode: {
                    x: 0, // 表示维度 0 映射到 x 轴。(第1列)
                    y: 3, // 表示维度 3 映射到 y 轴。(第4列)
                },
                data: [
                    // 每一列称为一个『维度』。
                    // 这里分别是维度 0、1、2、3。
                    [1, 1, 1, -2],
                    [2, 2, 2, -1],
                    [3, 3, 3, +0],
                    [4, 4, 4, +1],
                    [5, 5, 5, +2],
                    [6, 6, 6, +1],
                    [7, 7, 7, +0],
                    [8, 8, 8, -1],
                    [9, 9, 9, -2],
                ],
            },
        };

        option && myChart.setOption(option);

        function setValue(head_data, body_data) {
            option.xAxis.name = "x:" + head_data[option.series.encode.x];
            option.yAxis.name = "y:" + head_data[option.series.encode.y];

            option.series.dimensions = head_data;
            option.series.data = body_data;

            myChart.setOption(option);
        }

    </script>
</body>

</html>